<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <ul id="ul1"><li>zs</li><li>ls</li><li>wu</li></ul>
    内容:<input id="inputstr"><button onclick="addli()">添加</button><br>
    下标:<input id="inputtag"><button onclick="deleteli()">删除</button>


    <script>
        function addli() {
            var inputStrNode = document.getElementById("inputstr")
            var ulNode = document.getElementById("ul1")

            var textNode = document.createTextNode(inputStrNode.value )
            var liNode = document.createElement("li")
            liNode.appendChild(textNode);

            ulNode.appendChild(liNode);
            inputStrNode.value = ""
        }

        function deleteli() {
            var inputNode = document.getElementById("inputtag")
            var ulNode = document.getElementById("ul1")

            // childNodes: 获得一个结点的所有孩子
            var childNodes = ulNode.childNodes


            console.log(childNodes)

            // removeChild 删除某个结点的孩子
            // 参数: 被删除的孩子
            ulNode.removeChild(childNodes[inputNode.value])
        }
    </script>
</body>
</html>
